import * as echarts from 'echarts';
import { useEffect,useRef } from 'react';

const BarChart = ({title}) => {
    const charRef = useRef(null)
    useEffect(()=>{
    // 1. 获取渲染图标的dom节点
    // var chartDom = document.getElementById('main');
    var chartDom = charRef.current
    // 2. 图标初始化生成图表实例对象
    var myChart = echarts.init(chartDom);
    // 3. 准备图标参数
    var option = {
      title:{
        text:title
    },
      xAxis: {
        type: 'category',
        data: ['Vue', 'React', 'Angular']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [10, 40, 70],
          type: 'bar'
        }
      ]
    };
    // 4. 使用图标参数实现图标的渲染
    option && myChart.setOption(option);
  },[title])
  return (
    <div ref={charRef} style={{width:"500px",height:"400px"}}></div>
  )
}
export default BarChart